<template>
  <div class="final">
    <div class="header">
      <AppHeader>
        <div class="title">{{ $route.params.name }}</div>
      </AppHeader>
    </div>
    <div class="main">
      <RegisteredInfoRender
        v-if="groupName === '工商信息'"
        :detail="detail"
        :sections="sections"
      />

      <SpaceInfoRender v-else-if="groupName === '空间信息'" :detail="detail" />

      <SectionRender
        v-else-if="detail && sections"
        :detail="detail"
        :sections="sections"
      />
    </div>
  </div>
</template>

<script>
import RegisteredInfoRender from "../components/detail/RegisteredInfoRender";
import SectionRender from "../components/detail/SectionRender";
import SpaceInfoRender from "../components/detail/SpaceInfoRender";
import { useCompanyData } from "../use/useCompanyData";
import { useDetailSections } from "../use/useDetailSections";

export default {
  name: "Final",
  components: {
    SectionRender,
    RegisteredInfoRender,
    SpaceInfoRender
  },

  setup(props, { root: { $route } }) {
    const { id, name } = $route.params;

    const { data: detail } = useCompanyData(id);
    const { sections } = useDetailSections(name);

    return {
      groupName: name,
      detail,
      sections
    };
  }
};
</script>
